<template>
  <div class="details">
    <div class="top">
      <back></back>
      <span>动态详情</span>
      <div class="share">
        <img src="../assets/fen.png" />
        <van-cell @click="showShare = true" />
        <van-share-sheet
          v-model="showShare"
          :options="options"
          @select="onSelect"
        />
      </div>
    </div>
    <!-- 关注 -->
    <div class="vito">
      <div class="jade">
        <img :src="this.img" />
        <div class="live">
          <p>{{ details.ft_uname }}</p>
          <p>{{ details.ft_autograph }}</p>
        </div>
      </div>
      <van-button class="btn" size="mini" round>关 注</van-button>
    </div>
    <!-- 关注完 -->
    <div class="allegedly">{{ details.ft_content }}</div>
    <!-- 图片 -->
    <div class="photo">
      <div v-for="(item, i) in this.imagetop" :key="i">
        <van-image
          width="100%"
          height="100%"
          fit="cover"
          :src="require(`../../public/${item}`)"
          @click="onChange()"
        />
      </div>
    </div>
    <!-- 图片完 -->
    <!-- 时间-->
    <div class="hour">
      <p class="partake">{{ details.ft_date }}</p>
    </div>
    <!-- 评论 -->
    <div class="quality">
      <p>评论（737）</p>
    </div>
    <!-- 众评 -->
    <div>
      <!-- 左 -->
      <div class="trurong">
        <img src="../assets/avatar/2.jpg" alt="" />
        <div>
          <p class="long">长竹山</p>
          <p>2021/01/01 15:30</p>
        </div>
      </div>
      <div class="oil">加油！</div>
    </div>
    <div class="open">展开更多评论</div>
    <!-- 发表框 -->
    <div class="publish">
      <input type="text" placeholder="说点什么吧" />
      <button>发表</button>
    </div>
  </div>
</template>
<script>
import { ImagePreview } from "vant";
export default {
  data() {
    return {
      // 分享
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
      details: [],
      img: "",
      imagetop: [],
    };
  },
  methods: {
    showdetails() {
      let ftid = this.$route.query.ftid;
      this.axios.get("/findtop/findtopd?ftid=ftid").then((result) => {
        this.details = result.data.data;
        let imgPath = this.details.ft_avatar;
        this.img = "/" + imgPath;
        this.imagetop = result.data.data.ft_img_src;
        this.imagetop = this.imagetop.split(",");
      });
    },
    // 图片点击
    onChange() {
      ImagePreview(this.imagetop);
    },
    // 分享
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
  },
  mounted() {
    this.showdetails();
  },
};
</script>

<style>
.details {
  padding: 70px 0;
}
/* 头部 */
.details .top {
  width: 100%;
  height: 60px;
  position: fixed;
  font-size: 18px;
  font-weight: 600;
  top: 0;
  text-align: center;
  background-color: #fdfdfd;
  border-bottom: 1px solid #eee;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.details .top > span {
  width: 200px;
  text-align: left;
}
.details .share {
  width: 60px;
  height: 60px;
  position: relative;
}
.details .share > img {
  width: 30px;
  display: block;
  position: absolute;
  right: 20%;
  top: 30%;
  z-index: -10;
}
.details .van-cell {
  content: "";
  width: 60px;
  height: 60px;
  background: transparent;
}

/*  关注  */
.details .vito {
  width: 90%;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  align-items: center;
}
.details .jade {
  display: flex;
  align-items: cneter;
}
.details .jade > img {
  width: 50px;
  border-radius: 50%;
  margin-right: 10px;
}
.details .live {
  font-size: 14px;
  text-align: left;
  line-height: 22px;
}
.details .live > :last-child {
  font-size: 12px;
  color: #999;
}
.details .btn {
  padding: 0 10px;
  background-color: #efefef;
  color: #007bff;
  font-size: 12px;
  margin-top: 5px;
  z-index: -10;
}
/* 正文 */
.details .allegedly {
  width: 90%;
  font-size: 16px;
  text-align: left;
  margin: 20px auto;
  white-space: pre-wrap;
}
/*  图片 */
.details .photo {
  margin: 0 auto;
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.details .photo > div {
  width: 32%;
  height: 100px;
}
.details .photo > div img {
  border-radius: 10px;
}
/* 时间 */
.details .hour {
  width: 90%;
  margin: 0 auto;
  text-align: left;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
}
.details .partake {
  font-size: 14px;
  color: #999;
}
/* 赞过 */
.details .quality,
.details .son {
  display: flex;
  justify-content: space-between;
  padding: 30px 15px 10px;
  vertical-align: middle;
}
.details .discuss .help img {
  width: 20px;
  border-radius: 50%;
  vertical-align: baseline;
  vertical-align: middle;
  margin-right: 10px;
}

/* 左 */
.details .trurong {
  width: 90%;
  margin: 10px auto;
  display: flex;
}
.details .trurong img {
  width: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.details .long {
  font-size: 14px;
  text-align: left;
  margin-bottom: 10px;
}
.details .oil {
  width: 70%;
  margin: 15px auto;
  text-align: left;
  font-size: 16px;
}
/* 下 */
.details .print {
  background-color: #eee;
  width: 70%;
  margin: 0 auto;
  border-radius: 10px;
  padding: 10px 10px;
}
.details .set {
  text-align: left;
  margin: 5px;
  font-size: 14px;
}
.details .facial {
  color: #007bff;
}
/* 展开 */
.details .open {
  width: 90%;
  height: 40px;
  background-color: #eee;
  margin: 0 auto;
  margin-top: 30px;
  line-height: 40px;
  border-radius: 10px;
}
/* 发表 */
.details .publish {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0;
  background-color: #fdfdfd;
  display: flex;
  align-items: center;
  justify-content: center;
}
.details .publish > input {
  width: 70%;
  height: 35px;
  border-radius: 35px;
  border: 0;
  background-color: #eee;
  padding: 0 20px;
}
.details .publish > button {
  font-size: 16px;
  border: 0;
  background-color: transparent;
  margin-left: 10px;
  color: #007bff;
}
</style>
